<template>
    <div v-loading="loading">
        <br/>
        <el-form ref="tableform" class="click-table2-form" size="mini" :inline="true" :model="pageInfo">
            <el-form-item label="开始日期：" prop="date">
                <el-date-picker type="datetime" v-model="pageInfo.startDate" placeholder="操作日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="date">
                <el-date-picker type="datetime" v-model="pageInfo.endDate" placeholder="操作日期"></el-date-picker>
            </el-form-item>
            <!--<el-form-item label="角色" prop="role">
                <el-input v-model="formData.role" placeholder="请输入角色"></el-input>
            </el-form-item>-->
            <el-form-item label="操作方式" prop="type">
                <el-select v-model="pageInfo.type" placeholder="操作方式">
                    <el-option v-for="(item, index) in selectList" :key="index" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchEvent">查询</el-button>
                <el-button @click="$refs.tableform.resetFields()">重置</el-button>
            </el-form-item>
            <el-button type="success" size="small" @click="refreshAll">一键生成</el-button>
        </el-form>
        <elx-editable
                ref="elxEditable"
                class="click-table2"
                border
                height="500"
                size="small"
                :default-sort="{prop: 'trade_date', order: 'descending'}"
                :data.sync="list"
                :row-class-name="tableRowClassName"
                :edit-config="{trigger: 'click', mode: 'row'}"
                style="width: 100%">
            <elx-editable-column type="selection" width="50"></elx-editable-column>
            <elx-editable-column prop="id" width="50" label="序号"></elx-editable-column>
            <elx-editable-column prop="tsCode" width="100" label="股票代码"></elx-editable-column>
            <elx-editable-column prop="stockName" width="100" label="股票名称"></elx-editable-column>
            <elx-editable-column prop="size" width="150" label="当前持股数量"></elx-editable-column>
            <elx-editable-column prop="result" width="150" label="盈亏统计(元)"></elx-editable-column>
            <elx-editable-column prop="firstOperateTime" width="150" label="第一次操作" sortable
                                 :edit-render="{name: 'ElDatePicker', props: {type: 'datetime', format: 'yyyy-MM-dd'}}"></elx-editable-column>
            <elx-editable-column prop="lastOperateTime" width="150" label="最后操作" sortable
                                 :edit-render="{name: 'ElDatePicker', props: {type: 'datetime', format: 'yyyy-MM-dd'}}"></elx-editable-column>
            <elx-editable-column prop="attr3" label="K线" width="100">
                <template v-slot="scope">
                    <a href="" @click.stop.prevent="goHistory(scope.row)">交易记录</a>
                </template>
            </elx-editable-column>
            <elx-editable-column label="操作" width="100">
                <template v-slot="scope">
                    <el-button size="mini" type="success" @click="saveEvent(scope.row)">刷新</el-button>
                </template>
            </elx-editable-column>
        </elx-editable>
        <li>
            <div style="text-align: right;">
                <Page :total="total" :page-size="pageInfo.pageSize" show-elevator show-total
                      @on-change="e=>{pageSearch(e)}"></Page>
            </div>
        </li>
    </div>
</template>

<script>
    import Vue from 'vue';
    import XEUtils from 'xe-utils';

    import VueElementExtends from 'vue-element-extends';
    import 'vue-element-extends/lib/index.css';

    import httpUtil from '../../httpRequestUtil';

    Vue.config.productionTip = false;

    Vue.use(VueElementExtends);
    export default {
        data() {
            return {
                businessType: 1,
                businessStatus: '',
                businessName: '',
                uploadData: null,
                loading: false,
                fileList: [],
                selectList: [
                    {'label': '全部', 'spell': 'nan', 'value': '', 'value2': '全部', 'val': ''},
                    {'label': '大赚', 'spell': 'nan', 'value': '大赚', 'value2': '大赚', 'val': '大赚'},
                    {'label': '亏损', 'spell': 'nv', 'value': '亏损', 'value2': '亏损', 'val': '亏损'}]
                ,
                sexList: [
                    {'label': '大赚', 'spell': 'nan', 'value': '大赚', 'value2': '大赚', 'val': '大赚'},
                    {'label': '亏损', 'spell': 'nv', 'value': '亏损', 'value2': '亏损', 'val': '亏损'}]
                ,
                regionList: [],//{'value':1,'label':'北京','children':[{'value':1,'label':'北京市','children':[{'value':1,'label':'东城区'},{'value':2,'label':'西城区'},{'value':3,'label':'崇文区'},{'value':4,'label':'宣武区'},{'value':5,'label':'朝阳区'},{'value':6,'label':'丰台区'},{'value':7,'label':'石景山区'},{'value':8,'label':'海淀区'},{'value':9,'label':'门头沟区'},{'value':10,'label':'房山区'},{'value':11,'label':'通州区'},{'value':12,'label':'顺义区'},{'value':13,'label':'昌平区'},{'value':14,'label':'大兴区'},{'value':15,'label':'怀柔区'},{'value':16,'label':'平谷区'},{'value':17,'label':'密云县'},{'value':18,'label':'延庆县'}]}]},{'value':9,'label':'上海','children':[{'value':73,'label':'上海市','children':[{'value':719,'label':'黄浦区'},{'value':720,'label':'卢湾区'},{'value':721,'label':'徐汇区'},{'value':722,'label':'长宁区'},{'value':723,'label':'静安区'},{'value':724,'label':'普陀区'},{'value':725,'label':'闸北区'},{'value':726,'label':'虹口区'},{'value':727,'label':'杨浦区'},{'value':728,'label':'闵行区'},{'value':729,'label':'宝山区'},{'value':730,'label':'嘉定区'},{'value':731,'label':'浦东新区'},{'value':732,'label':'金山区'},{'value':733,'label':'松江区'},{'value':734,'label':'青浦区'},{'value':735,'label':'南汇区'},{'value':736,'label':'奉贤区'},{'value':737,'label':'崇明县'}]}]},{'value':19,'label':'广东','children':[{'value':197,'label':'广州市','children':[{'value':1747,'label':'东山区'},{'value':1748,'label':'荔湾区'},{'value':1749,'label':'越秀区'},{'value':1750,'label':'海珠区'},{'value':1751,'label':'天河区'},{'value':1752,'label':'芳村区'},{'value':1753,'label':'白云区'},{'value':1754,'label':'黄埔区'},{'value':1755,'label':'番禺区'},{'value':1756,'label':'花都区'},{'value':1757,'label':'增城市'},{'value':1758,'label':'从化市'}]},{'value':198,'label':'韶关市','children':[{'value':1759,'label':'武江区'},{'value':1760,'label':'浈江区'},{'value':1761,'label':'曲江区'},{'value':1762,'label':'始兴县'},{'value':1763,'label':'仁化县'},{'value':1764,'label':'翁源县'},{'value':1765,'label':'乳源瑶族自治县'},{'value':1766,'label':'新丰县'},{'value':1767,'label':'乐昌市'},{'value':1768,'label':'南雄市'}]},{'value':199,'label':'深圳市','children':[{'value':1769,'label':'罗湖区'},{'value':1770,'label':'福田区'},{'value':1771,'label':'南山区'},{'value':1772,'label':'宝安区'},{'value':1773,'label':'龙岗区'},{'value':1774,'label':'盐田区'}]},{'value':200,'label':'珠海市','children':[{'value':1775,'label':'香洲区'},{'value':1776,'label':'斗门区'},{'value':1777,'label':'金湾区'}]},{'value':201,'label':'汕头市','children':[{'value':1778,'label':'龙湖区'},{'value':1779,'label':'金平区'},{'value':1780,'label':'濠江区'},{'value':1781,'label':'潮阳区'},{'value':1782,'label':'潮南区'},{'value':1783,'label':'澄海区'},{'value':1784,'label':'南澳县'}]},{'value':202,'label':'佛山市','children':[{'value':1785,'label':'禅城区'},{'value':1786,'label':'南海区'},{'value':1787,'label':'顺德区'},{'value':1788,'label':'三水区'},{'value':1789,'label':'高明区'}]},{'value':203,'label':'江门市','children':[{'value':1790,'label':'蓬江区'},{'value':1791,'label':'江海区'},{'value':1792,'label':'新会区'},{'value':1793,'label':'台山市'},{'value':1794,'label':'开平市'},{'value':1795,'label':'鹤山市'},{'value':1796,'label':'恩平市'}]},{'value':204,'label':'湛江市','children':[{'value':1797,'label':'赤坎区'},{'value':1798,'label':'霞山区'},{'value':1799,'label':'坡头区'},{'value':1800,'label':'麻章区'},{'value':1801,'label':'遂溪县'},{'value':1802,'label':'徐闻县'},{'value':1803,'label':'廉江市'},{'value':1804,'label':'雷州市'},{'value':1805,'label':'吴川市'}]},{'value':205,'label':'茂名市','children':[{'value':1806,'label':'茂南区'},{'value':1807,'label':'茂港区'},{'value':1808,'label':'电白县'},{'value':1809,'label':'高州市'},{'value':1810,'label':'化州市'},{'value':1811,'label':'信宜市'}]},{'value':206,'label':'肇庆市','children':[{'value':1812,'label':'端州区'},{'value':1813,'label':'鼎湖区'},{'value':1814,'label':'广宁县'},{'value':1815,'label':'怀集县'},{'value':1816,'label':'封开县'},{'value':1817,'label':'德庆县'},{'value':1818,'label':'高要市'},{'value':1819,'label':'四会市'}]},{'value':207,'label':'惠州市','children':[{'value':1820,'label':'惠城区'},{'value':1821,'label':'惠阳区'},{'value':1822,'label':'博罗县'},{'value':1823,'label':'惠东县'},{'value':1824,'label':'龙门县'}]},{'value':208,'label':'梅州市','children':[{'value':1825,'label':'梅江区'},{'value':1826,'label':'梅县'},{'value':1827,'label':'大埔县'},{'value':1828,'label':'丰顺县'},{'value':1829,'label':'五华县'},{'value':1830,'label':'平远县'},{'value':1831,'label':'蕉岭县'},{'value':1832,'label':'兴宁市'}]},{'value':209,'label':'汕尾市','children':[{'value':1833,'label':'城区'},{'value':1834,'label':'海丰县'},{'value':1835,'label':'陆河县'},{'value':1836,'label':'陆丰市'}]},{'value':210,'label':'河源市','children':[{'value':1837,'label':'源城区'},{'value':1838,'label':'紫金县'},{'value':1839,'label':'龙川县'},{'value':1840,'label':'连平县'},{'value':1841,'label':'和平县'},{'value':1842,'label':'东源县'}]},{'value':211,'label':'阳江市','children':[{'value':1843,'label':'江城区'},{'value':1844,'label':'阳西县'},{'value':1845,'label':'阳东县'},{'value':1846,'label':'阳春市'}]},{'value':212,'label':'清远市','children':[{'value':1847,'label':'清城区'},{'value':1848,'label':'佛冈县'},{'value':1849,'label':'阳山县'},{'value':1850,'label':'连山壮族瑶族自治县'},{'value':1851,'label':'连南瑶族自治县'},{'value':1852,'label':'清新县'},{'value':1853,'label':'英德市'},{'value':1854,'label':'连州市'}]},{'value':213,'label':'东莞市','children':[]},{'value':214,'label':'中山市','children':[]},{'value':215,'label':'潮州市','children':[{'value':1855,'label':'湘桥区'},{'value':1856,'label':'潮安县'},{'value':1857,'label':'饶平县'}]},{'value':216,'label':'揭阳市','children':[{'value':1858,'label':'榕城区'},{'value':1859,'label':'揭东县'},{'value':1860,'label':'揭西县'},{'value':1861,'label':'惠来县'},{'value':1862,'label':'普宁市'}]},{'value':217,'label':'云浮市','children':[{'value':1863,'label':'云城区'},{'value':1864,'label':'新兴县'},{'value':1865,'label':'郁南县'},{'value':1866,'label':'云安县'},{'value':1867,'label':'罗定市'}]}]}],
                list: [],//[{'id':109,'stockName':'name_108','nickname':'名字_108','password':'GgDaBbCAE','type':'1','role':'前端','region':[9,73,719],'email':'dbbbfcaeaeffgegc@163.com','size':26,'rate':5,'flag':false,'phone':'13651389655','describe':'用用','describe2':'信户信户息用用','describe3':'信户户息信户用户','price':108,'createTime':1548629844131,'trade_date':1550661568446,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':167,'stockName':'name_166','nickname':'昵称_166','password':'CFfEDgdcbAB','type':'1','role':'项目经理','region':[19,199,1773],'email':'cfaagecdbbbfdcgfed@qq.com','size':21,'rate':1,'flag':false,'phone':'13661647851','describe':'息户信','describe2':'信信息户用用','describe3':'户息息息用信用信信用','price':166,'createTime':1549781573682,'trade_date':1550636990019,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':324,'stockName':'name_323','nickname':'名字_323','password':'AgDcBfb','type':'2','role':'后端','region':[9,73,719],'email':'cbgecedffbafd@qq.net','size':27,'rate':0,'flag':true,'phone':'13626859441','describe':'信户息户用','describe2':'用息息户信','describe3':'户息息用户信信信用息户信户用','price':323,'createTime':1548891045544,'trade_date':1550629744517,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':52,'stockName':'test_51','nickname':'名字_51','password':'dACEbfgDFeGB','type':'1','role':'设计','region':[19,199,1773],'email':'fbcgdedeafbcacd@163.net','size':28,'rate':4,'flag':true,'phone':'13616182248','describe':'信用用','describe2':'信用息户户用用','describe3':'户息户户信息息息信','price':51,'createTime':1546583850926,'trade_date':1550619742609,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':132,'stockName':'name_131','nickname':'昵称_131','password':'DFbBfdeCEca','type':'1','role':'后端','region':[1,1,5],'email':'dfcfbbgacebe@qq.com','size':25,'rate':4,'flag':false,'phone':'13658154149','describe':'户信户用','describe2':'信息用用用户息信','describe3':'信户息息户用用信息息户用信用户','price':131,'createTime':1549442771886,'trade_date':1550594838684,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':130,'stockName':'name_129','nickname':'名字_129','password':'efFDdcEB','type':null,'role':'项目经理','region':[19,199,1773],'email':'eaagbfad@qq.net','size':22,'rate':0,'flag':true,'phone':'13661116284','describe':'用息信户','describe2':'用信户户息息户信用','describe3':'息户户息信用息信信信息户息户信户用','price':129,'createTime':1547399346413,'trade_date':1550586434755,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':174,'stockName':'name_173','nickname':'名字_173','password':'fAgbFaecB','type':'2','role':'后端','region':[9,73,719],'email':'fdbeegdabdecfga@qq.com','size':23,'rate':1,'flag':false,'phone':'13613097395','describe':'息户','describe2':'息户户用息用信信','describe3':'户户信用户息信信息户用信用息息信用息用户','price':173,'createTime':1549308520902,'trade_date':1550574590144,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':253,'stockName':'test_252','nickname':'名字_252','password':'EGcegACBDd','type':'2','role':'设计','region':[19,199,1773],'email':'bcfadgdeegb@163.com','size':29,'rate':2,'flag':true,'phone':'13664286323','describe':'信用息用','describe2':'户息信户息用','describe3':'用户息息用信信信用用户户息户息信用','price':252,'createTime':1547819770738,'trade_date':1550557657350,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':189,'stockName':'name_188','nickname':'名字_188','password':'fBCgeAdEF','type':'1','role':'后端','region':[19,199,1773],'email':'cedebffbda@qq.net','size':28,'rate':1,'flag':true,'phone':'13617819646','describe':'信用用','describe2':'用信户息息用用户','describe3':'用户用信户信用息息息户用用信户信信息户','price':188,'createTime':1550112474713,'trade_date':1550554275222,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':244,'stockName':'name_243','nickname':'名字_243','password':'eECfFBG','type':null,'role':'测试','region':[9,73,719],'email':'affbaacddb@qq.com','size':26,'rate':4,'flag':true,'phone':'13688615565','describe':'用信户','describe2':'用息户息信用信','describe3':'息户息户息信息信用户户户','price':243,'createTime':1550080461831,'trade_date':1550552435581,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null}],
                pageInfo: {
                    pageIndex: 0,
                    pageSize: 50,
                    type: '全部',
                    startDate: null,
                    endDate: null
                },
                /*分页total属性绑定值*/
                total: 0,
                /* pageVO: {
                     currentPage: 0,
                     pageIndex: 0,
                     pageSize: 50
                 },*/
                pendingRemoveList: []
            };
        },
        created() {
            /*this.findSexList();
            this.findRegionList();*/
            this.findList(this.pageInfo);
        },
        methods: {
            goHistory(row){
                console.log(JSON.stringify(row));
                //this.$router.push('/one/daily_data/'+this.rowData.tsCode);
                this.$router.push({path:'/my/history', query: { tsCode: row.tsCode}});
            },
            //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
            dateFormat: function (time) {
                var date = new Date(time);
                var year = date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                // 拼接
                return year + month + day;
            },

            findList(e) {
                console.log('findList = ' + JSON.stringify(e));
                this.loading = false;
                this.pendingRemoveList = [];
                var that = this;
                if (e.startDate != null) {
                    e.pageIndex = 0;
                    //e.startDate = this.dateFormat(e.startDate);
                }
                if (e.endDate != null) {
                    e.pageIndex = 0;
                    //e.endDate = this.dateFormat(e.endDate);
                }
                console.log('findList = ' + JSON.stringify(e));
                httpUtil.postData(
                    '/my/stock/listHistory',
                    e,
                    function (data, message) {
                        if (data == null) {
                            return null;
                        }
                        console.log(`listHistory: ${JSON.stringify(data)}`);
                        that.list = data.result.list;
                        that.total = data.result.totalCount;
                    });
            },
            /*分页点击事件*/
            pageSearch(e) {
                console.log('pageSearch = ' + JSON.stringify(e));
                this.pageInfo.pageIndex = e - 1;
                console.log('this.pageInfo = ' + JSON.stringify(this.pageInfo));
                this.findList(this.pageInfo);
            },
            searchEvent() {
                console.log('search ...');
                //this.pageVO.currentPage = 1;
                this.findList(this.pageInfo);
            },
            refreshAll() {
                console.log('search ...');
                //this.pageVO.currentPage = 1;
                httpUtil.postData(
                    '/my/stock/refreshAll',
                    null,
                    function (data, message) {
                        if (data == null) {
                            return null;
                        }
                        Message({
                            type: 'success',
                            message: '操作完成(' + data + ')!'
                        });
                        console.log(`refreshAll: ${JSON.stringify(data)}`);
                    });
                this.findList(this.pageInfo);
            },
            saveEvent(row) {
                console.log('row = ' + JSON.stringify(row));
                var that = this;
                httpUtil.postData(
                    '/my/stock/refresh',
                    {
                        'tsCode': row.tsCode
                    }, function (data, message) {
                        if (parseInt(data) > 0) {
                            Message({
                                type: 'success',
                                message: '保存成功(' + data + ')!'
                            });
                            that.findList(that.pageInfo);
                        } else {
                            Message({
                                type: 'success',
                                message: '保存失败!'
                            });
                        }
                    }
                );
            },
            formatterDate(row, column, cellValue, index) {
                return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss');
            },
            tableRowClassName({row, rowIndex}) {
                if (this.pendingRemoveList.some(item => item === row)) {
                    return 'delete-row'
                }
                return ''
            },
            filterHandler(value, row, column) {
                const property = column['property']
                return row[property] === value;
            }

        }
    }
</script>

<style>
    .click-table2-oper {
        margin-bottom: 18px;
    }

    .click-table2 .delete-row {
        color: #f56c6c;
        text-decoration: line-through;
    }

    .click-table2-pagination {
        margin-top: 18px;
        text-align: right;
    }

    .click-table2.elx-editable .elx-editable-row.new-insert,
    .click-table2.elx-editable .elx-editable-row.new-insert:hover > td {
        background-color: #f0f9eb;
    }
</style>
